<div class="material-icons-content">
  <h1>Material Icons 图标库</h1>
  <p>这里展示了所有可用的 Material Icons 和 MDI 图标，你可以搜索和复制图标名称。</p>

  <!-- 搜索区域 -->
  <div class="search-container">
    <mat-form-field appearance="outline" class="search-field">
      <mat-label>搜索图标</mat-label>
      <input matInput 
             placeholder="输入图标名称或标签..." 
             [(ngModel)]="searchKeyword"
             (ngModelChange)="searchKeyword.set($event); onSearchChange()">
      <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>
  </div>

  <!-- 统计信息 -->
  <div class="card">
    <h3>图标统计</h3>
    <div class="stats-grid">
      <div class="stat-item">
        <mat-icon>inventory</mat-icon>
        <div class="stat-content">
          <span class="stat-number">{{ stats().total }}</span>
          <span class="stat-label">总图标数</span>
        </div>
      </div>
      <div class="stat-item">
        <mat-icon>palette</mat-icon>
        <div class="stat-content">
          <span class="stat-number">{{ stats().material }}</span>
          <span class="stat-label">Material Icons</span>
        </div>
      </div>
      <div class="stat-item">
        <mat-icon>extension</mat-icon>
        <div class="stat-content">
          <span class="stat-number">{{ stats().mdi }}</span>
          <span class="stat-label">MDI Icons</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 加载状态 -->
  @if (isLoading()) {
    <div class="loading-container">
      <mat-spinner diameter="50"></mat-spinner>
      <p>正在加载图标库...</p>
    </div>
  } @else {
    <!-- 分页信息 -->
    <div class="pagination-info">
      <span class="page-range">
        显示第 {{ getPageRange().startIndex }} - {{ getPageRange().endIndex }} 个图标，共 {{ getPageRange().total }} 个
      </span>
    </div>

    <!-- 图标网格 -->
    <div class="icons-grid">
      @for (icon of paginatedIcons(); track icon.name) {
        <div class="icon-card" 
             [class.mdi-icon]="isMDIIcon(icon.name)"
             matTooltip="点击复制图标名称"
             (click)="copyIconName(icon.name)">
          <!-- 图标显示区域 -->
          <div class="icon-display">
            @if (isMDIIcon(icon.name)) {
              <!-- 使用 SVG 图标解析器加载 MDI 图标 -->
              <mat-icon [svgIcon]="'mdi:' + getDisplayName(icon.name)" class="icon-svg"></mat-icon>
            } @else {
              <mat-icon class="icon-material">{{ getDisplayName(icon.name) }}</mat-icon>
            }
          </div>
          
          <!-- 图标名称 -->
          <div class="icon-name">
            {{ getDisplayName(icon.name) }}
          </div>
        </div>
      }
    </div>

    <!-- 分页控件 -->
    @if (filteredIcons().length > 0) {
      <div class="pagination-container">
        <mat-paginator
          [length]="filteredIcons().length"
          [pageSize]="pageSize()"
          [pageIndex]="currentPage()"
          [pageSizeOptions]="[25, 50, 100, 200]"
          [showFirstLastButtons]="true"
          (page)="onPageChange($event)">
        </mat-paginator>
      </div>
    }

    <!-- 无结果提示 -->
    @if (filteredIcons().length === 0) {
      <div class="no-results">
        <mat-icon>search_off</mat-icon>
        <h3>未找到匹配的图标</h3>
        <p>请尝试其他搜索关键词</p>
      </div>
    }
  }

  <!-- 使用说明 -->
  <div class="card">
    <h3>使用说明</h3>
    <div class="usage-info">
      <div class="usage-item">
        <mat-icon>palette</mat-icon>
        <div>
          <strong>Material Icons:</strong> 使用 <code>&lt;mat-icon&gt;icon_name&lt;/mat-icon&gt;</code>
        </div>
      </div>
      <div class="usage-item">
        <mat-icon>extension</mat-icon>
        <div>
          <strong>MDI Icons:</strong> 使用 <code>&lt;mat-icon svgIcon="icon_name"&gt;&lt;/mat-icon&gt;</code>
        </div>
      </div>
      <div class="usage-item">
        <mat-icon>content_copy</mat-icon>
        <div>
          <strong>复制图标名称:</strong> 点击图标卡片即可复制图标名称到剪贴板
        </div>
      </div>
    </div>
  </div>
</div>
